<!--
 * @Author: tian_biao
 * @Date: 2021-07-09 14:08:38
 * @LastEditTime: 2021-08-02 10:02:50
 * @Description: 缺陷库
-->
<template>
    <div id="defectLib" v-if='defectLibShow'>
        <!-- 顶部导航 -->
        <van-nav-bar title="缺陷库" left-arrow @click-left="back" fixed>
            <template slot="right">
                <div class="parent-circle">
                    <div class="child-circle"></div>
                </div>
            </template>
        </van-nav-bar>

        <!-- 任务列表 -->
        <div class="listPart">
            <van-row class="bg_4dbfae header search_header" type="flex" justify='space-around'>
                <!-- <van-col span="22"> -->
                <van-search style="position: unset" maxlength="20" v-model.trim="keyWord" show-action @search="search"
                    shape="round" background="#F5F6FA" placeholder="请输入查询内容">
                </van-search>
                <!-- </van-col> -->
            </van-row>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getDefectDicInfo">
                <div class="defectItem" @click="selectDefect(item)" v-for="(item,i) in defectLibList" :key="i">
                    <div class="rightPart">
                        <div class="timePart">
                            <div class="box"><div>设备种类：</div><div class="textShow">{{item.deviceKindName}}</div></div>
                            <div class="box"><div>缺陷部位：</div><div class="textShow">{{item.positionTypeText}}</div></div>
                            <div class="box"><div>部件名称：</div><div class="textShow">{{item.defectPositionText}}</div></div>
                            <div class="box"><div>缺陷描述：</div><div class="textShow">{{item.defectDesc}}</div></div>
                            <div class="box"><div>分类依据：</div><div class="textShow">{{item.classificationStandardText}}</div></div>
                            <div class="box"><div>缺陷性质：</div><div class="textShow">{{item.defectNatureText}}</div></div>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>
<script type="text/javascript">
    import Utils from '@/utils/util'
    import { getDefectDicInfo } from "../../api/defect"
    export default {
        name: "defectLib",
        props: {
            // 组件显示控制器
            defectLibShow: {
                type: Boolean,
                default() {
                    return false
                }
            },
            // 设备类型id
            deviceTypeId: {
                type: String,
                default() {
                    return ""
                }
            }
        },
        data() {
            return {
                userId: JSON.parse(localStorage.getItem('userInfo')).userId,
                defectLibList: [],// 缺陷库列表,
                defectData: {},// 缺陷库列表
                defectContent: '',// 缺陷库列表  
                keyWord: null,// 关键字查询
                loading: false,//加载状态
                finished: false,//加载完成
                total: 0,// 总条数
                pageNum: 1,// 当前页
                pageSize: 10,// 每页条数
            }
        },
        created() {
            console.log(this.deviceTypeId);
        },
        mounted() {
        },
        methods: {

            /**
             * @description: 返回
             */
            back() {
                this.$emit('close')
            },

            /**
             * @description:选择缺陷 
             * @param {*}
             * @return {*}
             */
            selectDefect(item) {
                this.defectData = item
                this.$emit('close', this.defectData)
            },

            search(){
                this.defectLibList=[]
                this.getDefectDicInfo()
            },
            
            /**
              * @description: 查询缺陷库
              * @param {*}
              * @return {*}
              */
            getDefectDicInfo() {
                var self = this
                // 非法字符
                var regExp=/[@#\$%\^&\*\!\！\(\)\（\）\……\￥\&\_\-\——\=\+]+/g
                if (regExp.test(this.keyWord)) {
                    this.$toast("查询内容含非法字符")
                    return
                }
                var params = {
                    deviceType: this.deviceTypeId,// 设备类型id
                    roleCode: "",
                    userId: this.userId,// 用户id
                    keyWord: this.keyWord,// 关键字
                    pageSize: this.pageSize,// 页面条数
                    pageNum: this.pageNum,// 页码
                }
                this.$toast.loading({
                    duration: 0,//展示时长 0不会消失
                    message: "正在获取...",
                    forbidClick: true,//是否禁止背景点击
                    overlay: true//是否显示背景遮罩层
                })
                // 获取缺陷库
                getDefectDicInfo(params).then(res => {
                    if (res.success) {
                        self.$toast.clear()
                        // 加载状态开始
                        self.loading = true;
                        var rows = res.data// 当前页返回的数据
                        self.defectLibList = self.defectLibList.concat(res.data)// 合并数据
                        self.total = res.pageInfo.total// 总条数
                        if (self.defectLibList.length >= self.total) {
                            self.finished = true;// 加载结束
                        } else {
                            self.pageNum++
                            // 加载状态结束
                            self.loading = false;// 加载结束
                        }
                    } else {
                        self.defectLibList = []
                        self.total = 0
                    }
                }).catch(err => {
                    self.$toast.clear()
                })
            },


        },
    }
</script>
<style scoped>
    #defectLib {
        background-color: rgba(250, 250, 250, 1);
        position: absolute;
        top: 0;
        left: 0;
    }

    .van-search__content--round {
        background: white !important;
        color: #E6E6E6 !important;
    }

    .van-search {
        margin-top: 3rem;
        width: 100%;
        border-radius: 25px !important;
        background-color: #fff !important;
        border: 1px solid #e5e5e5 !important;
        height: 2.5rem !important;
    }

    .tc-keyword-wrapper {
        margin: 5px 0;
    }

    .van-nav-bar {
        background: #17b49b;
    }

    .van-nav-bar /deep/ .van-icon {
        color: #fff;
        font-size: 22px;
    }

    .scan {
        margin: 0 10px;
    }

    .van-nav-bar /deep/ .van-nav-bar__title {
        color: #fff;
        font-size: 18px;
    }

    .van-nav-bar /deep/ .van-button {
        margin-right: 10px;
    }

    /* 任务列表 */
    .listPart {
        padding: 0 10px 10px;
        height: 100vh;
        overflow-y: auto;
        width: 93vw;
        margin: 0 auto;
        background-color: #fff !important;
    }

    .defectItem {
        /* height: 80px; */
        background: #fafafa;
        margin-bottom: 10px;
        border-radius: 5px;
        padding: 15px;
        color: #8f8f94;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;
    }

    .defectItem .leftPart {
        width: 100px;
        height: 100px;
        border: 1px solid #eee;
        margin-right: 20px;
    }

    .defectItem .rightPart {
        width: 100%;
    }

    .defectItem .rightPart .topPart {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .defectItem .rightPart .topPart .status.red {
        background: #eb3b3b;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .topPart .status.blue {
        background: #1481ee;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .topPart .status.orange {
        background: orange;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .topPart .status.grey {
        background: green;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .topPart .status.green {
        background: #ccc;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .describ {
        margin: 5px 0;
        color: #333;
    }

    .defectItem .rightPart .val333 {
        color: #333;
    }

    .van-search__action {
        display: none;
    }

    .van-icon-search::before {
        content: '\F0AF';
        font-size: 1.5rem;
        color: #999999;
    }


    .van-image {
        position: unset;
    }

    .listPart /deep/.van-cell {
        position: unset !important;
    }

    .listPart /deep/.van-cell__value {
        position: unset !important;
    }

    .textShow {
        /* display: inline-block; */
        width: 78%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .box{
        display: flex;
    }
    .red{
        color: red;
    }
</style>